<template>
  <div class="ssc-table">
    <div class="ssc-table-header">
      <span class="ssc-table-header-title">评论管理</span>
    </div>
    <a-table :defaultExpandAllRows="true" :dataSource="list" :columns="columns" :pagination="pagination" :loading="loading" @change="handleTableChange">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'userName'"> <a-avatar :src="record.avatar" /> {{ record.userName }} </template>
        <template v-if="column.dataIndex === 'isVisible'">
          <a-switch :checked="!!record.isVisible" @change="changeStatus(record)" checked-children="显示" un-checked-children="隐藏" />
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a class="color-error" @click="deleteComment(record)">删除</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
  import { message, Modal, TablePaginationConfig, TableProps } from 'ant-design-vue'
  import { computed, ref } from 'vue'

  import { requestCommentList, requestDeleteCommentByIds, requestUpdateVisible } from '/@/api/exchange/comment'
  import { HttpCodeEnum } from '/@/enums/httpEnum'

  const columns = [
    {
      title: '发布时间',
      dataIndex: 'createdTime',
    },
    {
      width: 300,
      title: '评论内容',
      dataIndex: 'content',
    },
    {
      title: '所属模块',
      dataIndex: 'type',
      customRender: ({ text }) => {
        /* 1-数据产品订单评论 2-用户需求评论 3-新闻资讯评论 4-大咖评论 */
        const types = ['数据产品订单评论', '用户需求评论', '新闻资讯评论', '大咖评论']
        return types[text - 1]
      },
    },
    // {
    //   title: '标题',
    //   dataIndex: 'title',
    // },
    {
      title: '点赞',
      dataIndex: 'likeCount',
    },
    {
      title: '发布人',
      dataIndex: 'userName',
    },
    {
      title: '状态',
      dataIndex: 'isVisible',
    },
    {
      title: '操作',
      dataIndex: 'action',
    },
  ]
  const loading = ref(false)
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  })

  const page = computed(() => ({
    pageIndex: pagination.value.current,
    pageSize: pagination.value.pageSize,
  }))
  const searchParams = ref<CommentTypes.SearchData>()

  const list = ref<CommentTypes.IResponse[]>([])

  // 分页查询
  const handleTableChange: TableProps['onChange'] = (tabPage: TablePaginationConfig) => {
    pagination.value.current = tabPage.current || 1
    pagination.value.pageSize = tabPage.pageSize || 10
    getContentList()
  }

  // 获取页面list
  const getContentList = async () => {
    loading.value = true
    const { responseData } = await requestCommentList({
      ...page.value,
      ...searchParams.value,
    })
    list.value = responseData.list || []
    pagination.value.total = +responseData.total || 0
    loading.value = false
  }

  // 查询
  const search = (params: CommentTypes.SearchData) => {
    searchParams.value = params
    pagination.value.current = 1
    getContentList()
  }

  // 切换状态
  const changeStatus = async (info: CommentTypes.CommentInfo) => {
    const { responseCode } = await requestUpdateVisible({
      isVisible: !info.isVisible,
      id: info.id,
    })
    if (responseCode === HttpCodeEnum.SUCCESS) {
      message.success('操作成功')
      getContentList()
    }
  }
  // 删除评论
  const deleteComment = (record: CommentTypes.CommentInfo) => {
    Modal.confirm({
      title: '删除',
      content: '是否删除该评论?',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        // 删除
        const { responseCode } = await requestDeleteCommentByIds(record.id)
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          getContentList()
        }
      },
    })
  }

  defineExpose({
    search,
  })
</script>
<style lang="less" scoped></style>
